import React, { Component } from 'react'
import { Layout, Menu } from 'antd';
import { Route, Link, Redirect } from 'react-router-dom'
import './index.less'
import MovieList from './MovieList'

const { Content, Sider } = Layout;

export default class Movies extends Component {
  constructor() {
    super()
    this.state = {
      defaultSelectedKeys: 'hot'
    }
  }
  render() {
    return (
      <div className="movies">
        <Layout style={{ minHeight: 615 }}>
          <Sider width={200} style={{ background: '#fff' }}>
            <Menu
              mode="inline"
              defaultSelectedKeys={[this.state.defaultSelectedKeys]}
              style={{ height: '100%', borderRight: 0 }}
            >
              <Menu.Item key="hot">
                <Link to="/movies/hot">最热最新</Link>
              </Menu.Item>
              <Menu.Item key="tag">
                <Link to="/movies/tag">标记最多</Link>
              </Menu.Item>
              <Menu.Item key="4">
                <Link to="/movies/top250">top250</Link>
              </Menu.Item>
            </Menu>
          </Sider>
          <Layout style={{ padding: '0 24px 24px', minWidth: '1092px' }}>
            <Content
              style={{
                background: '#fff',
                padding: 24
              }}
            >
              <Route path="/movies" render={() => <Redirect to="/movies/hot" />}></Route>
              <Route path="/movies/:type" component={MovieList}></Route>
            </Content>
          </Layout>
        </Layout>
      </div>
    )
  }
}
